
<template>
  <div class="item-content clearfix"
       v-for="item in dataList"
       :key="item.id">
    <h4 class="text-gray"
        :id="item.id"><i class="iconfont icon-shuqian "></i>{{ item.category }}</h4>
    <div class="row">
      <div class="xe-card col-md-3 box2"
           v-for="list in item.list"
           :key="list.title">
        <a :href=list.url
           class="info"
           target="_blank">
          <div class="card-content">
            <div class="user-img">
              <img class="hot-item-img"
                   :title=list.title
                   :src=list.image />
            </div>
            <div class="title-authors">
              <span class="title"><strong>{{ list.title }}</strong></span>
              <span class="sub-title">{{ list.tip }}</span>
            </div>
          </div>
        </a>
        <!-- tag -->
        <div class="tag-content"></div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import dataList from '../data/json'

console.log(dataList, 111)
</script>

<style lang="less" scoped>
.item-content {
  margin-top: 10px;
  .iconfont {
    font-size: 24px;
    margin-right: 8px;
  }
  .icon-io-tag::after {
    content: '';
    margin-top: 3px;
    position: absolute;
    width: 20px;
    height: 17px;
    background: url()
      no-repeat center;
    background-size: 100%;
  }

  .icon-io-tag {
    margin-right: 28px;
  }

  .text-gray {
    color: #555;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .box2 {
    height: 72px;
    border-radius: 4px;
    border: 1px solid #e4ecf3;
    transition: all 0.3s ease;
  }

  .xe-conversations {
    position: absolute;
    background: #fff;
    margin-bottom: 0px;
    padding: 15px;
    left: 0;
    right: 0;
    margin: 0 15px;
  }

  .xe-card {
    height: 72px;
    margin: 20px 15px 0 15px;
    .card-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 15px;

      .user-img {
        .hot-item-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 8px;
          line-height: 0;
        }
      }

      .title-authors {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        .title {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          margin-bottom: 8px;
          strong {
            font-weight: 700;
            color: #282828;
          }
        }

        .sub-title {
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          color: #878888;
        }
      }
    }

    &:hover {
      transform: translate(0, -5px);
      box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
    }
  }

  .overflowClip_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
  }

  .xe-comment p {
    margin-bottom: 0px;
  }

  @media (min-width: 992px) {
    .col-md-3 {
      width: 25%;
      float: left;
    }
    .sub-title {
      max-width: 330px;
    }
  }

  @media (max-width: 768px) {
    .sub-title {
      max-width: 180px;
    }
  }
}
</style>
